const webpack = require("webpack"),
    path = require('path'),
    ExtractTextPlugin = require("extract-text-webpack-plugin"),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
  	px2rem = require('postcss-px2rem');
  
const pathName = 'src/';   //模块上级的目录名字

module.exports = {
    entry:{//入口
        index: path.resolve(__dirname, pathName +'/index.js'),
        vendor: ['babel-polyfill', 'react', 'react-dom', 'react-router'], //插件入口,合并第三方包
        charts: ['echarts-for-react']
    },
    output:{//出口
        path: path.resolve(__dirname, 'dist/'),
        filename: '[name].[hash:7].js', //入口文件命名
        chunkFilename: '[name].chunk.[hash:7].js' //非入口文件命名
    },
    module: {
    	rules:[
    		{
		        test: /\.(js|jsx)$/,
		        exclude: [/node_modules/],
		        use: [{
		          loader: 'babel-loader',
		          options: { presets: ['es2015','react','stage-1']}
		        }],
		    },
		    {
                test: /\.css/,
                loader: ExtractTextPlugin.extract({//css样式抽离
                    fallback: "style-loader",
                    use: ["css-loader"]
                })
           	},
		    {
		        test: /\.scss$/,
		        use: ['style-loader', 'css-loader',
			        {
			        	loader:'postcss-loader',
			        	options:{
			        		plugins: loader => [
			        			px2rem({remUnit: 10})
			        		]
			        	}
			        }
			        ,'sass-loader']
		    },
		    {
		        test: /\.less$/,
		        use: ['style-loader', 'css-loader',
			        {
			        	loader:'postcss-loader',
			        	options:{
			        		plugins: loader => [
			        			px2rem({remUnit: 10})
			        		]
			        	}
				    },
			        'less-loader']
		    },
		    {
                test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
                use: [{
		            loader: 'url-loader',
		            options: {
		           		limit: 10000,
		           		name:'images/[hash:8].[name].[ext]'
		            }
			    }]
            }
    	]
    },
    resolve: {
	    extensions: ['.js', '.json', '.jsx'],
	    alias: {
	      '@': resolve(pathName)
    	}
  	},
    plugins:[
    	new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV)
            }
        }),
        //文件压缩
        new webpack.optimize.UglifyJsPlugin({
            output: {
                comments: false
            },
            compress: {
                warnings: false
            }
        }),
        //插件合并
        new webpack.optimize.CommonsChunkPlugin({
            name:"vendor",
            filename:"vendor.[hash:7].js"
        }),
        //css引入--内联
        new ExtractTextPlugin("[name].[hash:7].css"),
        //导出最终生成的入口文件html
        new HtmlWebpackPlugin({
            filename: 'index.html',//文件名
            template: pathName +'/index.html',//入口
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunksSortMode: 'dependency'
        })
    ],
    devServer: {
        host: 'localhost',
        hot:true,
        port: 8888,
        // 设置代理
        // proxy: {
        //     '/api': {
        //         target: 'http://127.0.0.1:8899',
        //         pathRewrite: {'^/api' : '/'},
        //         secure: false,
        //         changeOrigin:true
        //       }
        // }
    }
};

function resolve (dir) {
  return path.resolve(__dirname, dir)
}

